<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.4.4.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var dialog_num = 5;
		var dialog_width = 200;
		var dialog_height = 200;
		
		var left = 50;
		var top = 50;
		var margin = 10;
		for (var i=0;i<dialog_num;i++) {
			var str = '<div class="demo"><div id="dialog_'+i+'" title="title_'+i+'"><p>content_'+i+'</p></div></div>';
			
			$("#dialogs").append(str);
			$("#dialog_"+i+"").dialog({
				width : dialog_width,
				height : dialog_height
			}).css({left:100+i*50,top:100+i*50});
			left += dialog_width + margin;
			if (left + dialog_width > $(document).width()) {
				left = 50;
				top += dialog_height+margin;
			}
		}
		
		
	});
	
	</script>
</head>
<body>

<div id="dialogs"></div>

</body>
</html>